<script>
export default {};
</script>

<template>
  <div class="container">
    <div class="resource">
      <img src="../../../public/image.png" />
    </div>
    <div class="not-found">
      <p>抱歉！页面无法访问……</p>
    </div>
    <div class="to-home">
      <span>点击跳转：</span>
      <router-link to="/">首页</router-link>
    </div>
  </div>
</template>

<style scoped>
.resource{
  margin-top: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.not-found {
  margin: 0px auto 20px auto;
  display: inline;
  justify-content: space-around;
  align-items: center;
}

div img {
  width: 200px;

}

div p {
  font-weight: 700;
  color: #333;
  font:
    30px / 1.5 tahoma,
    arial,
    "Hiragino Sans GB",
    "\5b8b\4f53",
    sans-serif;
  justify-content: center;
  width: auto;
  text-align: center;
}

.to-home {
  align-items: center;
  width: 100%;
  text-align: center;
}

.to-home span {
  color: #706f6f;
}

.to-home a {
  color: red;
}
</style>
